<template>
  <div class="goods-type-select">
    <a-select
      show-search
      placeholder="盒式"
      :show-arrow="false"
      option-filter-prop="children"
      :default-active-first-option="true"
      style="width: 100%"
      :filter-option="filterOption"
      @change="handleChange"
      :value="value"
    >
      <a-select-option v-for="item in options" :key="item.id" :value="item.name">
        {{item.name}}-{{item.id}}{{ }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
// 输入客户姓名或客户ID的一部分或全部，返回完整客户姓名和客户ID的组合

export default {
  name: "GoodsTypeSelect",
  props: {
    initialValue: String
  },
  data() {
    return {
      data: [],
      value: this.initialValue,
      opened: false
    };
  },
  computed: {
    options() {
      return [
        {
          id: (1000 + 1).toString().substr(1),
          name: '纸箱'
        },
        {
          id: (1000 + 2).toString().substr(1),
          name: '内箱'
        },
        {
          id: (1000 + 3).toString().substr(1),
          name: '外箱'
        },
        {
          id: (1000 + 4).toString().substr(1),
          name: '平卡'
        },
        {
          id: (1000 + 5).toString().substr(1),
          name: '刀卡'
        },
        {
          id: (1000 + 6).toString().substr(1),
          name: '啤卡'
        }
      ];
    }
  },
  mounted() {
  },
  watch: {
    'initialValue' () {
      this.value = this.initialValue;
    }
  },
  methods: {
    handleChange(value) {
      this.value = value;
      this.$emit('change', value);
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    // focus() {
    //   this.opened = true;
    // },
    // blur() {
    //   this.opened = false;
    // }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.goods-type-select {
  // width: 400px;
}
</style>
